<template>
  <!-- template中写组件的结构,也必须有一个根标签 -->
  <div>
    <h1>test组件</h1>
    <div>哈哈哈</div>
    <div>{{ xxx }}</div>
    <div>{{ yyy }}</div>
    <div>{{ zzz }}</div>
    <div>{{ undefined }}</div>
    <button @click="handle">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'TestXxx',
  // props用来声明,要接收的props数据有哪些.
  // 必须写.只有写了props,才能将外界传入到组件中的数据,添加到组件实例上,才可以在模板中使用
  //   props: ['xxx', 'yyy'],
  // props写成对象. 则可以接收props数据,以及规定props数据的数据类型
  //   props: {
  //     xxx: Array,
  //     yyy: Number,
  //   },
  // props写成对象,对象中键的值还是对象,可以接收props数据,添加更多的校验规则
  props: {
    xxx: {
      type: Array,
      required: true,
    },

    yyy: {
      type: Number,
      default: 999,
    },

    // 接收了数据,但是没有传递,相当于就是传递了undefined. 如果是布尔值,则会有一个false
    zzz: {
      type: Number,
    },
  },
  methods: {
    handle() {
      console.log(this)
      //   props的数据不建议被修改. 但是实际上是可以修改的.只是会提出警告
      //   this.yyy = 888
      // 如果是复杂数据类型,修改时候,页面也不会变化,也没有警告
      //   this.xxx[3] = 8
      //   this.xxx.push(8)
    },
  },
}
</script>

<style></style>
